<script setup>
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { useDark, useToggle } from '@vueuse/core'
import { Sunny, Moon } from '@element-plus/icons-vue'
const greetMsg = ref("");
const name = ref("");
const isDark = useDark()
const toggleDark = useToggle(isDark)
const value2 = ref(true);
async function greet() {
  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
  greetMsg.value = await invoke("greet", { name: name.value });
}
</script>

<template> 
 <div class="isdark">
  <!-- <el-button type="info" @click="toggleDark()" :icon="Message"> 
    light
  </el-button> -->
  <el-switch
    v-model="value2"
    class="mt-2"
    @change="toggleDark()"
    style="margin-left: 24px"
    inline-prompt
     :active-action-icon="Moon"
    :inactive-action-icon="Sunny"
    :active-icon="Sunny"
    :inactive-icon="Moon"
  />
 </div>
    <router-view />
</template>

<style>
*{
  padding: 0;
  margin: 0;
}
body{
    display: flex;
    justify-content: center;
    overflow: hidden !important;
}
.isdark{
  position: absolute;
  z-index: 999;
  top: 33px;
  right: 92px;
}
</style>

